<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css样式-->
    <link rel="stylesheet" href="../css/index.css"/>
    <!--引入js样式-->
    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                align="center">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="primary" size="mini">查看</el-button>
                <el-button type="danger" size="mini">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    </template>
    </el-table>

</div>


<script>
    new Vue({
        el:'#app',

        data:{
            tableData:[ {date:'2019.10.10',name:'小明',address:'北京'},//每个json对象对应表格中一条数据
                {date:'2019.10.10',name:'小李',address:'南京'}]
        },
        methods:{
            handleClick(row) {
                console.log(row);
            }
        }


    });
</script>
</body>
</html>